<template>
  <div class="feedBackDetail">
      <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">意见信息</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <div class="feedBackDetail-content" ref="autoHeight">
      <div v-for="(img,index) in listData.image" :key="index">
        <div class="content-img" v-if="img.url">
          <img :src="host+img.url" alt="">
        </div>
      </div>
      <div v-if='listData.title' class="content-title" style="font-size:.32rem;">
        {{listData.title}}
      </div>
      <div v-if='listData.residential&&listData.residential.name' class="content-title">
        {{listData.residential.name}}
      </div>
      <div v-if='listData.content' class="content-title">
        {{listData.content}}
      </div>
      <div  v-for="item in listDatacontent" :key="item.id">
        <!-- 物业回复 -->
          <div class="content-title" v-if="item.type == 1">
            <span>物业回复：</span>{{item.content}}
          </div>
      </div>
      <!-- 业主回复 -->
        <div class="content-title" v-if="listStar.judge!=null" >
          <span>业主评价：</span>{{listStar.judge}}
        </div>
    </div>
    <div class="evaluate" v-if="listStar.status==10">
      <div class="evaluate-tips">
        请对本次的服务进行评价
      </div>
      <div class="evaluate-star">
        <van-rate
          style="width: auto;"
          v-model="star"
          allow-half
          void-icon="star"
          void-color="#6b5da6"
          color= '#ffa272'
          @change= 'change(star)'
          size= ".4rem"
        />
      </div>
      <div class="addre">
        <van-field
          clearable
          type="textarea"
          rows="1"
          autosize
          v-model="content"
          placeholder="输入评价内容" />
      </div>
      <div class="addEvaluate" @click="addjudge">
        <span>提交</span>
        <!-- <span>结束</span> -->
      </div>
    </div>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Rate,Field } from 'vant';
export default {
  data(){
    return{
      star: 5,
      Id: '',
      content:'',
      listData:[],
      listStar:'',
      listDatacontent:[],
      listType: '',
      host:api.host
    }
  },
  created(){
    this.getList()
  },
  methods:{
    //提交评价
    addjudge(){
      if(!this.content){
        this.$toast('请输入评价内容')
        return
      }
      this.$post(api.judge, {
        id: this.Id,
        // 分数
        star: this.star,
        // 内容
        judge: this.content
      })
      .then((res) => {
      if(res.data.code===1){
        this.getList()
        this.$toast('感谢您的评价')
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    goback(){
      this.$router.go(-1)
    },
    change(star){
      this.star = star
    },
    getList(){
      this.Id = this.$route.query.id
      this.$get(api.inporoce, {
        params: {
          id:this.Id,
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.listData = response.data.data
          this.listStar = response.data.data
          this.listDatacontent = response.data.data.re
          if(this.listStar.status==20){
            this.$refs.autoHeight.style.paddingBottom = '.5rem'
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },
  components: {
    [Rate.name]:Rate,
    [Field.name]:Field,
  }
}
</script>
<style>
.feedBackDetail .van-cell{
  background: none;
  padding: 5px 10px;
}
.feedBackDetail .van-field__body{
  border: 1px solid #57c5c6;
  border-radius: .15rem;
}
</style>

<style scoped>
.van-rate__item:not(:last-child){
  padding-right: .25rem;
}
.feedBackDetail-content{
  padding: 1.5rem .5rem 0rem .5rem;
  padding-bottom: 4rem;
}
.content-img{
  margin-bottom: .2rem;
  width: 100%;
  height: 6.3rem;
}
.content-img img{
  width: 100%;
  height: 100%;
}
.content-title{
  word-break: break-all;
  margin-top: .2rem;
  width: 100%;
  height: 100%;
  font-weight: bold;
  /* text-align: center; */
  color: #000;
}
.evaluate{
  z-index: 888;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;
}
.evaluate-star{
  margin-bottom: .2rem;
  height: 30%;
  text-align: center;
  line-height: .3rem;
}
.evaluate-tips{
  margin: .1rem 0;
  height: 30%;
  font-size: .32rem;
  line-height: .62rem;
  text-align: center;
  color: #FD5585;
}
.addEvaluate{
  display: flex;
  width: 70%;
  margin: .2rem auto;
  height: 40%;
  line-height: .7rem;
  color: #fff;
  border-radius: .4rem;
  text-align: center;
}
.addEvaluate span{
  flex: 1;
  border-radius: .1rem;
  display: block;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
}
.addEvaluate span:nth-of-type(1){
  margin-right: .15rem;
}
.addEvaluate span:nth-of-type(2){
  margin-left: .15rem;
}
.addre{
  margin: 0 1.2rem;
}
</style>
